<template>
	<div class="main-nav-header">
		<div class="main-menu-icon" @click="handleFoldClick">
			<el-icon size="28px">
				<Component :is="isFold?'Expand':'Fold'"/>
			</el-icon>
		</div>
		<div class="main-menu-content">
			<div class="breadcrumb">面包屑</div>
			<div class="info">
				<main-header-info/>
			</div>
<!--
			<header-crumb/>
			<header-info/>
-->
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import MainHeaderInfo from '@/components/main/mainHeaderInfo.vue'

const emit = defineEmits(['foldChange'])
// 是否选中。
const isFold = ref(false)

function handleFoldClick() {
	isFold.value = !isFold.value
	emit('foldChange', isFold.value)
}
</script>

<style scoped lang="less">
.main-nav-header{
	display: flex;
	align-items: center;
	flex: 1;
	height: 100%;
	.main-menu-icon{
		display: flex;
		align-items: center;
		cursor: pointer;
	}
	.main-menu-content{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		padding: 0 18px;
	}
}
</style>